<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        .dot {
            width: 50px;
            height: 50px;
            margin-top: 50px;
            background-color: lawngreen;
            position: absolute;
            border-radius: 50%;
            font-size: 18px;
            font-weight: 900;
            text-align: center;
            line-height: 50px;
        }
        
        #box {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: red;
            position: absolute;
            border-radius: 50%;
            font-size: 18px;
            font-weight: 900;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <button onclick="move()">动画</button>

    <div id="box">
       
    </div>
    <div class="dot">1</div>
    <div class="dot">2</div>
    <div class="dot">3</div>
    <div class="dot">4</div>
</body>
<script>
    // box.style.left = "200px"
    // var box = document.getElementById("box")
    // function move() {
    //     var l = 0
    //     var timer = setInterval(function () {
    //         l += 20
    //         box.style.left = l + "px"
    //         if (l >= 500) {
    //             clearInterval(timer)
    //         }

    //     }, 100)

    // }

    // requestAnimationFrame在下一次浏览器帧刷新时执行某个函数 常用于执行动画
    // 
    // function move() {
    //     var l = 0
    //     function ani() {
    //         l += 5
    //         box.style.left = l + "px"
    //         timer = requestAnimationFrame(ani)
    //         if (l >= 500) {
    //             cancelAnimationFrame(timer)
    //         }
    //     }
    //     var timer = requestAnimationFrame(ani)
    // }

    // function move() {
    //     console.log("123")
    //     setTimeout(move, 100)
    // }
    // setTimeout(move, 100)

    // 单个球旋转
    // var x = window.document.documentElement.clientWidth / 2
    // var y = window.document.documentElement.clientHeight / 2
    // var r =300
    // function move() {
    //     var angle = 0
    //     function circle() {
    //       angle+=5
    //         var x1=x+r*Math.cos(angle/180*Math.PI)
    //          var y1=y+r*Math.sin(angle/180*Math.PI)
    //          box.style.left=x1-50+"px"
    //          box.style.top=y1-50+"px"
    //         requestAnimationFrame(circle)
    //     }
    //     requestAnimationFrame(circle)
    // }
    var dot = document.querySelectorAll(".dot")
    var x = window.document.documentElement.clientWidth / 2
    var y = window.document.documentElement.clientHeight / 2
    var r = 200
    function move() {
        var angle = 0
        function circle() {
            angle+=5
            if(angle>=360){
                angle=0
            }
            for (var i = 0; i < dot.length; i++) {
                var x1 = x + r * Math.cos(angle+i*(360/dot.length) / 180 * Math.PI)
                var y1 = y + r * Math.sin(angle+i*(360/dot.length) / 180 * Math.PI)
                dot[i].style.left = x1 - 25 + "px"
                dot[i].style.top = y1 - 25 + "px"
            }
            requestAnimationFrame(circle)
        }
        requestAnimationFrame(circle)
    }

</script>

</html>